<!-- 第四种单选按钮样式 -->
<template>
    <div class="yd-radio4">
        <div class="item" :class="{ 'active': item[valueKey] == tVal }" v-for="(item, index) in list" :key="index" @click="handleChange(item)">
            <template v-if="!$scopedSlots.default">{{ item[labelKey] }}</template>
            <slot v-else v-bind="item"></slot>
        </div>
    </div>
</template>
<script>
export default {
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: [String, Number],
            default: ''
        },
        list: {
            type: Array,
            default: () => []
        },
        labelKey: {
            type: String,
            default: 'label'
        },
        valueKey: {
            type: String,
            default: 'value'
        }
    },
    data() {
        return {
            
        };
    },
    computed: {
        tVal: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('change', val);
            }
        },
    },
    methods: {
        handleChange(item) {
            this.tVal = item[this.valueKey];
        }
    }
};
</script>
<style scoped lang='scss'>
.yd-radio4 {
    display: inline-flex;
    align-items: center;
    gap: 0 12px;
    .item {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color:  var(--color-76777A-8A8A8A);
        padding: 0 8px;
        line-height: 28px;
        border-radius: 4px;
        position: relative;
        cursor: pointer;
        box-sizing: border-box;
    }
    .active {
        background: var(--color-EAF2FF-0D6AFF_10);
        color: var(--color-2979FF-0D6AFF);
        box-sizing: border-box;
    }
}
</style>